<template>
  <div ref="box" @mouseenter="mouseenter" class="box_tooltip">
    <slot></slot>
    <div
      ref="tooltip" @click.stop
      class="tooltip"
      :style="{ top: `-${top + 10}px`, left: `-${left}px` }"
    >
      <div class="tooltip-text">{{ content }}<slot name="content"></slot></div>
      <div class="Up"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: {},
  },
  data() {
    return {
      left: 0,
      top: 0,
    };
  },
  methods: {
    mouseenter() {
      let boxProps = this.$refs.box.getBoundingClientRect();
      let tooltipProps = this.$refs.tooltip.getBoundingClientRect();
      this.left =tooltipProps.width * 0.5 - boxProps.width * 0.5 - 10;
      this.top = tooltipProps.height;
    },
  },
};
</script>

<style lang="scss" scoped>
.box_tooltip {
  position: relative;
  left: 0;
  top: 0;
  &:hover {
    .tooltip {
      display: block;
    }
  }
  .tooltip {
    white-space: nowrap; /* 内容超出不换行 */
  word-break: break-all;
    display: none;
    position: absolute;
    top: -40px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 5px 10px;
  }
  .Up {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid rgba(0, 0, 0, 0.7);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid transparent;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
